<script setup>
// 狗狗护理主题数据
const careTopics = [
  {
    id: 1,
    title: '日常美容护理',
    image: 'https://picsum.photos/id/1025/600/400',
    content: `定期美容对于保持狗狗的健康和舒适至关重要。不同品种的狗狗有不同的美容需求，但以下几点是通用的：

1. **梳理毛发**：根据狗狗的毛发生长情况，每天或每周至少梳理1-2次，以去除死毛、防止打结，并促进血液循环。

2. **洗澡**：一般每2-4周给狗狗洗一次澡，使用专门为狗狗设计的沐浴露。过于频繁的洗澡会破坏狗狗皮肤的天然油脂平衡。

3. **修剪指甲**：每2-4周修剪一次指甲，过长的指甲会影响狗狗的行走姿势，甚至导致疼痛和感染。

4. **清洁耳朵**：每周检查并清洁狗狗的耳朵，使用专门的宠物耳清洁液，注意不要将任何东西插入耳道深处。

5. **刷牙**：每天或至少每周几次为狗狗刷牙，使用宠物专用牙膏，以预防口腔疾病。`
  },
  {
    id: 2,
    title: '健康检查与疫苗',
    image: 'https://picsum.photos/id/1062/600/400',
    content: `定期的健康检查和疫苗接种是保障狗狗健康的重要措施：

1. **年度体检**：每年带狗狗去兽医处进行一次全面的健康检查，包括身体检查、血液检查和寄生虫筛查。

2. **疫苗接种**：按照兽医的建议为狗狗接种必要的疫苗，包括核心疫苗（如狂犬病疫苗、犬瘟热疫苗等）和非核心疫苗（根据狗狗的生活方式和风险因素决定）。

3. **寄生虫预防**：每月使用驱虫药物预防跳蚤、蜱虫和肠道寄生虫，并定期检查狗狗是否有寄生虫感染的迹象。

4. **绝育/去势**：考虑为狗狗进行绝育或去势手术，这不仅可以控制宠物数量，还可以预防某些疾病并改善行为问题。

5. **健康记录**：建立并维护狗狗的健康记录，包括疫苗接种日期、体检结果和任何疾病或治疗的历史。`
  },
  {
    id: 3,
    title: '运动与锻炼',
    image: 'https://picsum.photos/id/1029/600/400',
    content: `适当的运动和锻炼对于狗狗的身体和心理健康至关重要：

1. **每日运动**：根据狗狗的年龄、品种和健康状况，提供足够的每日运动量。一般来说，狗狗每天需要30分钟到2小时的运动。

2. **运动类型**：混合不同类型的运动，包括散步、跑步、玩耍和训练活动，以保持狗狗的兴趣和全面发展。

3. **心理刺激**：除了身体运动外，还需要为狗狗提供心理刺激，如益智玩具、训练课程和互动游戏。

4. **安全考虑**：在热天避免剧烈运动，确保狗狗有足够的水，并注意运动场地的安全性，避免受伤。

5. **年龄适配**：根据狗狗的年龄调整运动强度。幼犬和老年犬需要更温和的运动，而成年犬可以进行更剧烈的活动。`
  },
  {
    id: 4,
    title: '行为训练与社交化',
    image: 'https://picsum.photos/id/1074/600/400',
    content: `早期的行为训练和社交化对于培养一只行为良好的狗狗至关重要：

1. **基础训练**：教导狗狗基本的服从命令，如“坐下”、“等待”、“来”和“安静”，使用积极强化的方法，如奖励和表扬。

2. **社交化**：在狗狗的关键社交化期（3-14周龄），让它接触不同的人、动物、环境和声音，帮助它建立自信和良好的社交技能。

3. **行为问题**：及时处理任何行为问题，如过度吠叫、分离焦虑或攻击性，必要时寻求专业训犬师的帮助。

4. **一致性**：在训练中保持一致性，所有家庭成员使用相同的命令和规则，以避免混淆。

5. **耐心与理解**：训练需要时间和耐心，理解狗狗的行为动机，避免使用惩罚性的训练方法。`
  }
]
</script>

<template>
  <div class="care-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>狗狗护理指南</h1>
      <p>了解如何正确照顾你的爱犬，让它们保持健康和快乐</p>
    </div>
    
    <!-- 护理指南卡片 -->
    <div class="care-guides">
      <div v-for="topic in careTopics" :key="topic.id" class="care-guide-card">
        <div class="guide-header">
          <div class="guide-image">
            <img :src="topic.image" :alt="topic.title" />
          </div>
          <h2>{{ topic.title }}</h2>
        </div>
        
        <div class="guide-content">
          <p v-for="(paragraph, index) in topic.content.split('\n\n')" :key="index" class="content-paragraph">
            {{ paragraph }}
          </p>
        </div>
      </div>
    </div>
    
    <!-- 护理提示 -->
    <div class="care-tips">
      <h3>重要护理提示</h3>
      <div class="tips-list">
        <div class="tip-item">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
          </div>
          <p>观察狗狗的日常行为和习惯，任何异常都可能是健康问题的信号</p>
        </div>
        
        <div class="tip-item">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
          </div>
          <p>为狗狗提供一个舒适、安全的生活环境，包括适当的住所和休息区域</p>
        </div>
        
        <div class="tip-item">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
          </div>
          <p>建立规律的日常生活，包括喂食、运动和睡眠时间，有助于狗狗感到安全和安心</p>
        </div>
        
        <div class="tip-item">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
          </div>
          <p>保持与兽医的定期沟通，及时咨询任何关于狗狗健康和行为的问题</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #ff7f00;
  --primary-hover: #e66f00;
  --text-primary: #333;
  --text-secondary: #666;
  --text-light: #999;
  --background-light: #f5f5f5;
  --white: #ffffff;
  --border-color: #e0e0e0;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --radius: 8px;
  --transition: all 0.3s ease;
}

/* 页面整体样式 */
.care-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.page-header p {
  font-size: 18px;
  color: var(--text-secondary);
  margin: 0;
}

/* 护理指南卡片 */
.care-guides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.care-guide-card {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: var(--transition);
}

.care-guide-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

/* 指南头部 */
.guide-header {
  position: relative;
}

.guide-image {
  height: 240px;
  overflow: hidden;
}

.guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.care-guide-card:hover .guide-image img {
  transform: scale(1.05);
}

.guide-header h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: var(--white);
  padding: 30px 24px 20px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

/* 指南内容 */
.guide-content {
  padding: 24px;
}

.content-paragraph {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.content-paragraph:last-child {
  margin-bottom: 0;
}

/* 护理提示 */
.care-tips {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}

.care-tips h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 24px 0;
  text-align: center;
}

.tips-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.tip-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: rgba(255, 127, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  margin-top: 4px;
}

.tip-item p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .care-guides {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 28px;
  }
  
  .page-header p {
    font-size: 16px;
  }
  
  .guide-image {
    height: 200px;
  }
  
  .guide-header h2 {
    font-size: 20px;
    padding: 24px 20px 16px;
  }
  
  .care-tips {
    padding: 24px;
  }
  
  .tips-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .care-page {
    padding: 16px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .guide-content {
    padding: 20px;
  }
  
  .care-tips h3 {
    font-size: 20px;
  }
  
  .tip-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
</style>